<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>初体验vue</title>
    <!-- 1.引入vue.js文件 -->
    <script src="./js/vue.js"></script>
  </head>
  <body>
    <!-- 
    2.挂载点
    vue会把模板进行解析成js对象后，进行处理，在处理完毕后，最终要挂载到真实的dom节点中
    此处就是它的挂载点
   -->
    <div id="app">
      <!-- 绑定声明的数据 -->
      <h3>{{ title }}</h3>
      <input type="text" id="inputTitle" />
    </div>
    <!-- 3.实例化vue和声明数据 -->
    <script>
      const app = new Vue({
        // 指定最终要挂载的真实的dom节点选择器名称
        el: '#app',
        // 声明数据,vue2中此处可以写对象也可以写函数返回对象，vue3只能写函数返回对象
        data: {
          title: '你好vue'
        }
      })

      // document.getElementById('inputTitle').oninput = function () {
      //   app.title = this.value
      // }
      document.getElementById('inputTitle').oninput = e => {
        app.title = e.target.value
      }
    </script>
  </body>
</html>
